<template>
	<view>
		<!-- <view @click="aaa" class="mt80 posiab">sdsd</view> -->
		<action-bar type='login' :screen="isFullScreen" @onSetUP="onSetUP"></action-bar>
		
		<view class="flex" style="justify-content: space-between;align-items: flex-start;">
			<view class="width1001 ">
				<view class="posire ">
					<view class="posiab flex-ju-c width1001 flex-col height100vh  colorfff size40">
						<image mode="heightFix" class="image height160 mb50" :src="IMGURL+config.pcLogoFilePath"></image>
						<view>{{config.pcName}}</view>
					</view>
					<image class="image height100vh width1001" src="/static/img/denglubg.png"></image>
					<view class="size28 posiab bottom50 colorfff center width1001 size28">v{{version}}</view>
				</view>
			</view>
			<view v-if="0" class="flex1">
				<view class="flex-ju-c mt350 flex-col">
					<view class="width800">
						<view class="flex-a-i size40  ">
							<view @click="tapdnlu(0)" :class="islogin==0?'active':''" class="denghlu">登录</view>
							<view @click="tapdnlu(1)" :class="islogin==1?'active':''" class="ml60 denghlu">加入会议</view>
						</view>
						<template v-if="islogin==0">
							<view class="bgF6F7FA flex-a-i wh800-80 ra10 mt80">
								<image mode="widthFix" class="image width42 ml20" src="/static/img/yonghu.png"></image>
								<input class="pl20  flex1" v-model="username" placeholder="请输入用户名" />
							</view>
							<view class="bgF6F7FA flex-a-i wh800-80 ra10 mt50">
								<image mode="widthFix" class="image width42 ml20" src="/static/img/mimaloin.png">
								</image>
								<el-input type="password" show-password v-model="password" class="pl20 ptextwd flex1"
									placeholder="请输入密码" />
							</view>

							<view class="flex-ju-b mt50">
								<view class="bgF6F7FA wh800-80 ra10  flex-ju-c">
									<input class="center" v-model="code" placeholder="请输入验证码" />
								</view>
								<view class=" flex-ju-c ">
									<image @click="setimg" mode="heightFix" class="image height80 ml50"
										:src="'data:image/jpeg;base64,'+codeimg"></image>
								</view>
							</view>
							<el-button @click="sublogin" class="bg165FFF height80 width1000 mt100"
								type="primary">登录</el-button>
						</template>

						<template v-else>
							<view class="bgF6F7FA flex-a-i wh800-80 ra10 mt80">
								<image mode="widthFix" class="image width42 ml20" src="/static/img/yonghu.png"></image>
								<input v-model="huiyihao" class="pl20  flex1" placeholder="请输入会议号码" />
							</view>
							<view class="bgF6F7FA flex-a-i wh800-80 ra10 mt50">
								<image mode="widthFix" class="image width42 ml20" src="/static/img/mimaloin.png">
								</image>
								<input v-model="huiyiname" class="pl20  flex1" placeholder="请输入参会名称" />
							</view>

							<view class=" mt50 color333">
								<el-checkbox v-model="ismic" @change="changemic">入会时关闭麦克风</el-checkbox>
								<el-checkbox v-model="iscam" @change="changecam">入会时关闭摄像头</el-checkbox>
							</view>
							<el-button @click="tohuiyi" class="bg165FFF height80 width1000 mt100"
								type="primary">加入会议</el-button>
						</template>
					</view>
				</view>
			</view>
		<view class="flex1">
			<view class="flex-ju-c mt350 flex-col">
				<view class="width800">
					<view class="flex-a-i size40  ">
						<view @click="tapdnlu(0)" :class="islogin==0?'active':''" class="denghlu">登录</view>
						<view @click="tapdnlu(1)" :class="islogin==1?'active':''" class="ml60 denghlu">加入会议</view>
					</view>
					<template v-if="islogin==0">
						
						<view class=" flex-a-i input-text height80 ra10 mt80">
							<image mode="widthFix" class="image width42 ml20 posiab" src="/static/img/yonghu.png">
							</image>
							<el-input style="border: none;" v-model="username" class="wh800-80 ptextwd flex1"
								placeholder="请输入用户名" />
						</view>
						
						<view class=" flex-a-i input-text height80 ra10 mt50">
							<image mode="widthFix" class="image width42 ml20 posiab" src="/static/img/mimaloin.png">
							</image>
							<el-input type="password" show-password v-model="password" class="wh800-80 ptextwd flex1"
								placeholder="请输入密码" />
						</view>
		
						<view class="flex-ju-b mt50">
							<view class=" ra10 wh500-80 flex-ju-c">
								<el-input class="wh500-80  text-code ptextwd"  v-model="code" placeholder="请输入验证码" />
							</view>
							<view class="flex-ju-c">
								<image @click="setimg" mode="heightFix" class="image height80 ml50"
									:src="'data:image/jpeg;base64,'+codeimg"></image>
							</view>
						</view>
							<el-button @click="sublogin" style="height:80rpx;" class="bg165FFF width1000 mt100"
								type="primary">登录</el-button>
						
					</template>
		
					<template v-else>
						
						
						<view class=" flex-a-i input-text wh800-80 ra10 mt80">
							<image mode="widthFix" class="image width42 ml20 posiab" src="/static/img/yonghu.png"></image>
							<el-input v-model="huiyihao" class="ptextwd wh800-80 flex1" placeholder="请输入会议号码" />
						</view>
						
						<view class=" flex-a-i input-text wh800-80 ra10 mt50">
							<image mode="widthFix" class="image width42 ml20 posiab" src="/static/img/mimaloin.png">
							</image>
							<el-input v-model="huiyiname" class="wh800-80 ptextwd flex1" placeholder="请输入参会名称" />
						</view>
		
						<view class=" mt50 color333">
							<el-checkbox v-model="ismic" @change="changemic">入会时关闭麦克风</el-checkbox>
							<el-checkbox v-model="iscam" @change="changecam">入会时关闭摄像头</el-checkbox>
						</view>
						<el-button @click="tohuiyi" class="bg165FFF height80 width1000 mt100"
							type="primary">加入会议</el-button>
					</template>
				</view>
			</view>
		</view>
		</view>
		<tishi @confirm="onDelIP" ref="tuiip" isexit="1" isclen="1" bgcolor="#165fff" title="删除后系统不再保存该IP地址和端口号"></tishi>
		<join-pwd ref="joinPWD" @confirm="tapJoin"></join-pwd>

		<uni-popup :is-mask-click="false" ref="upSetHttp" mode="center">
			<view @click="visible=false" class="bgfff ra30 width950 posire pt20 pb50">
				<view class="size36 color333 bold flex-a-i ml50 mb30">
					<view class="wh6-30 mt8 bg2C7BFF mr15"></view>配置服务器地址
				</view>

				<view class="border-tebecef pg50">

					<view class="flex-a-i">
						<view class="width210 text-right">服务器地址：</view>

						<uni-data-select v-model="value" :clear="false" :localdata="range"
							@change="gselectchange"></uni-data-select>

						<view class="posire " style="height:32px;">
							<el-popover placement="bottom" :visible="visible" popper-class="povk" :width="200">
								<template #reference>
									<view>
										<el-input @click.stop="opinpt" ref="buttonRef" maxlength="50" v-model="yumingvalue"
											class="sled" placeholder="输入域名"
											style="width:400rpx;background: #fff;margin-left: -1px;"></el-input>

										<image @click.stop="visible = !visible" v-if="uirlpei.length" mode="widthFix"
											class="image right0 top10 posiab width50 xuanxia" src="/static/img/acc.png">
										</image>
									</view>
								</template>
								<view>
									<view v-for="(item,p) in uirlpei" :key="p" class="  flex-ju-b">
										<view @click.stop="seturl(item,p)" class="wh350-70 homer hfcenter">
											{{item.yumingvalue}}
										</view>
										<view @click.stop="seturlclose(item,p)" class="width30 hmfsd hfcenter flex1">x
										</view>
									</view>
								</view>
							</el-popover>

						</view>
					</view>

					<view class="flex-a-i mt60">
						<el-form-item prop="pass">
							<view class="width210 text-right">端口：</view>
							<el-input v-model="duankovalue" type="number" maxlength="50" style="width: 598rpx" placeholder="输入端口"
								class="input-with-select flex1 color333">
							</el-input>
						</el-form-item>
					</view>
					<el-button class="wh300-80 mt30" @click="tapsubmitset" type="primary">提交</el-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		ElMessage
	} from 'element-plus'
	import {
		Lock,
		CaretBottom,
		Search
	} from '@element-plus/icons-vue'

	export default {
		data() {
			return {
				isFullScreen:true,
				isDragging: false,
				duankovalue: "",
				isdelindex: "",
				uuid: "",
				code: "",
				password: "",
				username: "",
				uirlpei: [],
				yumingvalue: "",
				visible: false,
				value: 1,
				fuwuselect: 1,
				range: [{
						value: 1,
						label: "http://"
					},
					{
						value: 2,
						label: "https://"
					}
				],
				ishezhi: false,
				islogin: 0,
				codeimg: "",
				huiyiname: "",
				huiyihao: "8000001901",
				iscam: true,
				ismic: true,
				meetingService: {},
				newjoin_pwd: "",
				version:"",
				config:""
			}
		},

		onShow() {
			uni.setStorageSync('user', '')
			uni.setStorageSync('info', '')
			uni.setStorageSync('token', '')
			this.isFullScreen=!this.isFullScreen
			
			uni.$off('joinpwd')
			uni.$on('joinpwd', res => {
				this.$refs.joinPWD.open()
			})
			
			uni.$off('callSucceed')
			uni.$on('callSucceed', res => {
				uni.hideLoading()
				//type=1去掉通讯录
				uni.navigateTo({
					url: './video?priv_room_cuid=' + this.huiyihao + '&huiyiname=' + this.huiyiname +
						'&type=1'
				})
			})
			if(window.flutter){
				flutter.call('unMaximize', {}, (result, error) => {
					windowMax = false
				})
			}
		},
		onLoad() {
			this.http('/app/config').then(res => {
				this.config=res.data
				uni.setStorageSync('config_data', res.data)
			})
		},
		mounted() {

			if (process.env.NODE_ENV === 'development') {
				this.ishezhi = true
			}

			if (uni.getStorageSync('thaturl')) {
				this.getcode()
				this.getserve()
			}


			if (uni.getStorageSync('fuwu')) {
				var fw = uni.getStorageSync('fuwu')
				this.fuwuselect = fw[0].fuwuselect
				this.yumingvalue = fw[0].yumingvalue
				this.duankovalue = fw[0].duankovalue
				this.uirlpei = fw
			}

			

			setTimeout(() => {
				if(window.flutter){
					flutter.call('serverUrl', {}, (result, error) => {
						if (result) {
							var sp = result.split('://')
							var port = sp[1].split(':')
							this.fuwuselect = (sp[0] == 'http' ? 1 : 2)
							this.yumingvalue = port[0]
							this.duankovalue = port[1]
							this.getHttp()
						}
					})
					
					flutter.call('versionName', {}, (result, error) => {
						this.version = result
					})
				}
				
			}, 1000)

		},
		methods: {
			getHttp() {
				uni.setStorageSync('thaturl', {
					fuwuselect: this.fuwuselect,
					yumingvalue: this.yumingvalue,
					duankovalue: this.duankovalue
				})

				if (uni.getStorageSync('fuwu')) {
					var gw = uni.getStorageSync('fuwu')
					var a = 0
					gw.map(item => {
						if (item.yumingvalue == this.yumingvalue) {
							a = 1
						}
					})
					gw.push({
						fuwuselect: this.fuwuselect,
						yumingvalue: this.yumingvalue,
						duankovalue: this.duankovalue
					})

					if (a != 1) {
						uni.setStorageSync('fuwu', gw)
					}
				} else {
					uni.setStorageSync('fuwu', [{
						fuwuselect: this.fuwuselect,
						yumingvalue: this.yumingvalue,
						duankovalue: this.duankovalue
					}])
				}
				this.getcode()
				this.getserve()
			},
			// aaa(){
			// 	flutter.call('clearNotifications', {}, (result, error) => {
			// 	});
			// },
			onSetUP() {
				this.$refs.upSetHttp.open()
				// if(flutter){
				// 	flutter.call('callNotifications', {
				// 		title:'邀请会议',
				// 		body:'视频会所以',
				// 		flag:'11112233'
				// 	}, (result, error) => {
				// 	});
				// }
			},
			getserve() {
				this.http('/app/meetingService/info').then(res => {
					this.meetingService = res.data
					uni.setStorageSync('meetingService', res.data)
				})
			},
			tapJoin(pwd) {
				this.newjoin_pwd = pwd
				uni.showLoading()
				this.call_now()
			},
			call_now(huiyihao) {
				zjsdk3.make_call_now(this.meetingService.meetingIp, this.meetingService.port, this.huiyihao, this
					.newjoin_pwd, this.huiyiname)
			},
			onDelIP() {
				this.uirlpei.splice(this.isdelindex, 1)

				if (!this.uirlpei.length) {
					this.visible = false
				}
				uni.setStorageSync('fuwu', this.uirlpei)
			},
			showCanHui(e) {
				if (!e.show) {
					Invalidpin = 0
				}
			},
			gselectchange(value) {
				this.fuwuselect = value
			},
			tapsubmitset() {
				if (this.yumingvalue == '') {
					ElMessage({
						message: '服务器地址空',
						type: 'warning',
					})
					return
				}
				if (this.duankovalue == '') {
					ElMessage({
						message: '端口空',
						type: 'warning',
					})
					return
				}

				var url = ''
				if (this.fuwuselect == 1) {
					url = 'http://'
				} else {
					url = 'https://'
				}

				if (process.env.NODE_ENV === 'development') {
					url += (this.yumingvalue + ':' + this.duankovalue)
				} else {
					if (this.fuwuselect == 1) {
						url = 'https://rh.wexiang.vip:11243/server/'
					} else {
						url += (this.yumingvalue + ':' + this.duankovalue)
					}
				}

				uni.showLoading({
					mask: true
				})
				uni.request({
					url,
					header: {
						'APP': '5152'
					},
					method: 'GET',
					data: {
						uuid: ''
					},
					success: (res) => {
						this.getHttp()

						ElMessage({
							message: '服务器地址配置成功',
							type: 'success',
						})
						this.$refs.upSetHttp.close()
						uni.hideLoading()

					},
					fail: (res) => {
						ElMessage({
							message: '服务器地址配置失败',
							type: 'error',
						})
						uni.hideLoading()
					}
				})
			},
			setimg() {
				this.getcode()
			},
			getcode() {
				this.http('/captchaImage').then(res => {
					this.codeimg = res.img
					this.uuid = res.uuid
				})
			},
			seturl(item,index){
				this.yumingvalue = item.yumingvalue
				this.duankovalue=item.duankovalue
				this.fuwuselect = item.fuwuselect
				this.visible =false
			},
			seturlclose(item, index) {
				this.isdelindex = index
				this.$refs.tuiip.show()
			},
			opinpt() {
				if (this.uirlpei.length) {
					this.visible = !this.visible
				}
			},
			tapdnlu(index) {
				this.islogin = index
			},
			changemic(e) {
				window.ismic = e
			},
			changecam(e) {
				window.iscam = e
			},
			tohuiyi() {
				if (!this.huiyihao) {
					ElMessage({
						message: '输入会议号码',
						type: 'warning',
					})
					return
				}
				if (!this.huiyiname) {
					ElMessage({
						message: '输入参会名称',
						type: 'warning',
					})
					return
				}

				uni.showLoading()
				window.Invalidpin = 0
				this.call_now()
			},
			sublogin() {
				if (!this.username) {
					ElMessage({
						message: '输入用户名',
						type: 'warning',
					})
					return
				}
				if (!this.password) {
					ElMessage({
						message: '输入密码',
						type: 'warning',
					})
					return
				}
				if (!this.code) {
					ElMessage({
						message: '输入验证码',
						type: 'warning',
					})
					return
				}
				uni.showLoading()
				this.http('/appLogin', {
					username: this.username,
					password: this.password,
					code: this.code,
					uuid: this.uuid
				}, 'post').then(res => {
					uni.setStorageSync('token', res.data.token)
					uni.hideLoading()
					uni.showToast({
						title: "登录成功",
						icon: "none"
					})
					uni.reLaunch({
						url: "/pages/index/index"
					})
				}).catch(res => {
					setTimeout(() => {
						this.getcode()
					}, 700)
				})
			},

		}
	}
</script>

<style>
	/deep/ .ptextwd .el-input__wrapper,.text-code .el-input__wrapper{
		 box-shadow:inherit;
		background: #f6f7fa;
	} 
	/deep/ .ptextwd .is-focus ,.text-code .is-focus{
		box-shadow: 0 0 0 1px #165fff inset !important;
	}
	
	
	
	
	/deep/ .text-code .el-input__wrapper{
		background: #f6f7fa;
	}
	/deep/ .text-code .el-input__inner{
		text-align: center;
	}
	/deep/.input-text .el-input__inner{
	  padding-left: 25px; 
	}
	
	
	/deep/ .el-slider__button-wrapper {
		display: none !important;
	}
	

	.uni-stat__select {
		width: 100px;
		flex: none;
	}

	/deep/ .wCheckcls .el-checkbox__input {
		display: none;
	}

	/deep/ .wCheck .el-checkbox__label {
		width: 100%;
	}

	/deep/ .viewdrawer {
		background: none;
	}

	/deep/ .el-table--fit .el-table__inner-wrapper:before {
		background: #fff;
	}

	/deep/ .viewdrawer {
		margin-top: 50px;
	}

	/deep/ .sled .el-select__wrapper {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	/deep/ .sleds .el-select__wrapper {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}


	/deep/ .el-popper.is-light.el-popover {
		z-index: 10 !important;
	}

	/deep/ .el-popper.is-light.el-popover.povk {
		z-index: 999 !important;
	}

	/deep/ .ppphhh {
		z-index: 1000;
	}


	.hkmk {
		height: calc(100vh - 92rpx)
	}

	.hmfsd:hover {
		color: red;
	}

	.hmfsd {
		text-align: center;
	}

	.denghlu {
		border-bottom: 2px solid #fff;
	}

	.denghlu:hover {
		cursor: pointer;
	}

	.active {
		border-bottom: 2px solid #165FFF;
		font-weight: bold;
	}

	.hover:hover {
		background: #e0eaff;
	}

	.homer:hover {
		background-color: #e8efff;
		color: #165FFF;
	}

	.dashedborder {
		border: 1px dashed #E6E6E6;
	}

	.nowrap {
		white-space: nowrap;
	}

	.xuanxia {
		transform: rotate(180deg);
	}

	.hfcenter {
		display: flex;
		align-items: center;
		padding-left: 10px;
	}

	.borderced4db {
		width: 500rpx;
		height: 80rpx;
	}


	.drag-items {
		margin: 0 28rpx;

	}

	.drag-item {
		height: 70px;
		box-sizing: border-box;
		background-color: #f6f6f6;
		color: #333333;
		padding: 30rpx 32rpx;
		border-radius: 8rpx;

	}

	.del-icon {
		width: 58rpx;
		height: 10rpx;
	}

	.icon {
		width: 80rpx;
		margin: 0 32rpx 0 28rpx;
	}

	.drag-icon {
		width: 58rpx;
	}
</style>